<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <style>
        /* ul li,
        ol li {
            list-style: none;
        } */
        audio {
            width: 500px;
        }

        .gobilibili {
            width: 200px;
            height: 100px;
            border-radius: 50px;
            border: none;
            background-color: pink;
            color: skyblue;
            font-size: 20px;
            font-weight: 600;
        }


        .tbl {
            text-align: center;
        }
    </style>
</head>

<body>
    <img src="./images/Snipaste_2022-09-07_10-26-52.png" alt="" width="500px" height="200px">
    <img src="./images/Snipaste_2022-09-07_10-30-30.png" alt="" width="500px" height="200px">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/20181117_DWP.png/220px-20181117_DWP.png" alt="">
    <!-- <video src="./video/女坤练习生 - 001 - 女坤练习生.mp4" controls width="800px" height="600px" loop autoplay mediagroup></video> -->
    <!-- <audio src="./audio/【蔡徐坤】仙剑鸡侠传 - 001 - 【蔡徐坤】仙剑奇侠传.mp3" controls autoplay mediagroup></audio> -->
    <!-- 解决谷歌浏览器不能自动播放问题 -->
    <iframe allow="autoplay" src="./audio/【蔡徐坤】仙剑鸡侠传 - 001 - 【蔡徐坤】仙剑奇侠传.mp3"></iframe>

    <ul type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol>

    <div class="tbl">
        <table border="2px">
            <th>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </th>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br>

    <div class="tbl">
        个人简历
        <table border="1px" style="border-color: red;" align="center">
            <tr align="center">
                <td rowspan="2">基本资料</td>
                <td>姓名</td>
                <td>小白</td>
                <td>性别</td>
                <td>女</td>
            </tr>
            <tr>
                <td>政治面貌</td>
                <td>群众</td>
                <td>出生日期</td>
                <td>1988-12-12</td>
            </tr>
            <tr align="center">
                <td colspan="5">业余爱好</td>
            </tr>
            <tr>
                <td>替身</td>
                <td>唱歌（鸡你太美baby）</td>
                <td>跳</td>
                <td>rap</td>
                <td>篮球</td>
            </tr>
        </table>
    </div>

    <br>



    <a href="https://www.bilibili.com" target="_blank">bilibili</a>

    <button class="gobilibili">去哔哩哔哩</button>

    <script>
        const btn = document.querySelector('.gobilibili');
        btn.addEventListener("click", function () {
            location.href = "https://www.bilibili.com"
        })
    </script>
</body>

</html>